<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">

    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>事件分类占比统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-pie-sort"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>事件报告来源占比统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-pie-sour"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>事件处理及解决情况占比统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-pie-solve"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>月度事件工单数量趋势分析</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>事件按处理组统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>

    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>

    <script type="text/javascript">
        $(function () {


            // ---------- 事件分类占比统计：饼状图 ----------
            var pieSort = echarts.init(document.getElementById("echarts-pie-sort"));
            var sortSource1 = 2499;
            var sortSource2 = 34;
            var sortSource3 = 0;
            var sortSource4 = 13;
            var sortSource = {
                title: {
                    subtext: '服务请求：' + sortSource1 + '\n' + '\n' +
                        '故障处理：' + sortSource2 + '\n' + '\n' +
                        '投诉处理：' + sortSource3 + '\n' + '\n' +
                        '信息安全：' + sortSource4,
                    subtextStyle: { color: '#000000' }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)",
                    fontSize: 20
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '5%',
                    padding: 0,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 10,
                },
                series: [
                    {
                        type: 'pie',
                        radius: ["30%", "40%"],
                        center: ['60%', '40%'],
                        data: [
                            { value: sortSource1, name: '服务请求' },
                            { value: sortSource2, name: '故障处理' },
                            { value: sortSource3, name: '投诉处理' },
                            { value: sortSource4, name: '信息安全' }
                        ]
                    }
                ]
            }
            pieSort.setOption(sortSource);
            $(window).resize(pieSort.resize);


            // ---------- 事件报告来源占比统计：饼状图 ----------
            var pieSour = echarts.init(document.getElementById("echarts-pie-sour"));
            var sourSource1 = 1858;
            var sourSource2 = 327;
            var sourSource3 = 9;
            var sourSource4 = 4;
            var sourSource5 = 0;
            var sourSource6 = 252;
            var sourSource7 = 96;
            var sourSource = {
                title: {
                    subtext: '电话：' + sourSource1 + '\n' + '\n' +
                        '电子邮件：' + sourSource2 + '\n' + '\n' +
                        '面议：' + sourSource3 + '\n' + '\n' +
                        '内部报告：' + sourSource4 + '\n' + '\n' +
                        '告警事件：' + sourSource5 + '\n' + '\n' +
                        '模板流程：' + sourSource6 + '\n' + '\n' +
                        '其他：' + sourSource7,
                    subtextStyle: { color: '#000000' }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)",
                    fontSize: 20
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '5%',
                    padding: 0,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 10,
                },
                series: [
                    {
                        type: 'pie',
                        radius: ["30%", "40%"],
                        center: ['60%', '40%'],
                        data: [
                            { value: sourSource1, name: '电话' },
                            { value: sourSource2, name: '电子邮件' },
                            { value: sourSource3, name: '面议' },
                            { value: sourSource4, name: '内部报告' },
                            { value: sourSource5, name: '告警事件' },
                            { value: sourSource6, name: '模板流程' },
                            { value: sourSource7, name: '其他' },
                        ]
                    }
                ]
            }
            pieSour.setOption(sourSource);
            $(window).resize(pieSour.resize);


            // ---------- 事件处理及解决情况占比统计：饼状图 ----------
            var pieSolve = echarts.init(document.getElementById("echarts-pie-solve"));
            var solveSource1 = 10;
            var solveSource2 = 10;
            var solveSource3 = 50;
            var solveSource = {
                title: {
                    subtext: '未处理事件：' + solveSource1 + '\n' + '\n' +
                        '处理中事件：' + solveSource2 + '\n' + '\n' +
                        '已解决事件：' + solveSource3,
                    subtextStyle: { color: '#000000' }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)",
                    fontSize: 20
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '5%',
                    padding: 0,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 10,
                },
                series: [
                    {
                        type: 'pie',
                        radius: ["30%", "40%"],
                        center: ['60%', '40%'],
                        data: [
                            { value: solveSource1, name: '未处理事件' },
                            { value: solveSource2, name: '处理中事件' },
                            { value: solveSource3, name: '已解决事件' }
                        ]
                    }
                ]
            }
            pieSolve.setOption(solveSource);
            $(window).resize(pieSolve.resize);


            // ---------- 月度事件工单数量趋势分析：折线图 ----------
            var lineChart = echarts.init(document.getElementById("echarts-line"));
            var lineData = [0, 22, 3, 20, 40, 60, 80, 70, 10, 20, 30, 100];
            var lineoption = {
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '10%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    boundaryGap: false,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: lineData,
                    type: 'line'
                }]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);


            // ---------- 事件按处理组统计：柱状图 ----------
            var barChart = echarts.init(document.getElementById("echarts-bar"));
            var barData = [20, 37, 24, 14, 40];
            var baroption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    height: '90%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['一线运维客户端', '一线运维服务台', '一线运维机房', '二线运维', '应用运维'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    },
                    axisLabel: {
                        fontSize: 14,
                        color: '#000000',
                        formatter: function (params) {  // 分隔x轴文字
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 4;  //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '40%',
                    data: barData,
                    label: {   // 图形上的文本标签
                        show: true,
                        position: 'insideTop', // 相对位置
                        color: '#fff'
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            color: function (params) {
                                var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }]
            };
            barChart.setOption(baroption);
            $(window).resize(barChart.resize);




        })
    </script>
</body>

</html>